const hoverHandler = {

    // v-hover="{ backgroundColor: 'green', color: 'white' }"
    mounted(el, binding, vnode) {
        // 存储原来的样式
        const originalStyle = window.getComputedStyle(el)
        const obj = {}
        for (const key in binding.value) {
            obj[key] = originalStyle[key]
        }

        // 鼠标覆盖时 使用binding定义的样式
        el._mouseover = e => {
            for (const key in binding.value) {
                el.style[key] = binding.value[key]
            }
        }

        // 鼠标移出时 恢复原来的样式
        el._mouseout = e => {
            for (const key in obj) {
                el.style[key] = obj[key]
            }
        }

        el.addEventListener(
            "mouseover",
            el._mouseover
        )

        el.addEventListener(
            "mouseout",
            el._mouseout
        )
    },

    unmounted(el) {
        el.removeEventListener(
            "mouseover",
            el._mouseover
        )

        el.removeEventListener(
            "mouseout",
            el._mouseout
        )

        delete el._mouseover
        delete el._mouseout
    }
    
}

export default hoverHandler